<template>
    <a-modal :visible="state.visible" title="Basic Modal" @cancel="handleCancel" @ok="handleOk">
        <AForm ref="formRef" :model="state.formData" :labelCol="{ style: 'width:80px' }">
            <AFormItem label="指定门店" name="storeCode">
                <AInput v-model:value="state.formData.storeCode"></AInput>
            </AFormItem>
            <AFormItem label="指定会员" name="customerId">
                <ASelect v-model:value="state.formData.customerId">
                    <ASelectOption :value="1">张女士</ASelectOption>
                </ASelect>
            </AFormItem>
            <AFormItem label="指定员工" name="userId">
                <ASelect v-model:value="state.formData.userId">
                    <ASelectOption :value="1">张女士</ASelectOption>
                </ASelect>
            </AFormItem>
            <AFormItem label="预约日期" name="reserveDate">
                <a-date-picker v-model:value="state.formData.reserveDate" valueFormat="YYYY-MM-DD" />
            </AFormItem>
            <AFormItem label="工作时间段" name="startTime">
                <ASelect v-model:value="state.formData.startTime">
                    <ASelectOption value="09:00">9点</ASelectOption>
                </ASelect>
                <ASelect v-model:value="state.formData.endTime">
                    <ASelectOption value="09:00">9点</ASelectOption>
                </ASelect>
            </AFormItem>
            
            <AFormItem label="预约服务" name="goodsIds">
                <ASelect v-model:value="state.formData.goodsIds">
                    <ASelectOption :value="1">按摩</ASelectOption>
                </ASelect>
            </AFormItem>
            <AFormItem label="预约状态" name="storeCode">
                <ASelect v-model:value="state.formData.status">
                    <ASelectOption :value="1">已确认</ASelectOption>
                </ASelect>
            </AFormItem>
            <AFormItem label="备注" name="lat">
                <AInput v-model:value="state.formData.remark"></AInput>
            </AFormItem>

        </AForm>
    </a-modal>
</template>
<script lang="ts" setup>
import { ResponseVo, ReservationTypes } from "../../../type";
import { reactive, ref, onMounted } from "vue";
import UploadImage from "@/components/UploadImage/UploadImage.vue"
import { ReservationService } from "@/service";
import { message } from "ant-design-vue";
import DateRangePicker from "@/components/DateRangePicker/index.vue"

const props = withDefaults(defineProps<{
    currentReservation?: Partial<ReservationTypes.IReservationItem>;
}>(), {
    currentReservation: (): Partial<ReservationTypes.IReservationItem> => ({})
})

const formRef = ref()
const emit = defineEmits<{
    (e: "ok"): void,
    (e: "cancel"): void
}>()

const state = reactive<{
    formData: Partial<ReservationTypes.IReservationItem> & {
        workStartTime:string,
        workEndTime: string,
    };
    visible: boolean
}>({
    formData: {
        workStartTime: "",
        workEndTime: ""
    },
    visible: true
})

onMounted(() => {
    state.formData = { ...props.currentReservation } as any;
})

const handleOk = () => {
    formRef.value.validateFields().then(async (valid: boolean) => {
        if (valid) {
            let res: ResponseVo<any>
            if (state.formData.id) {
                res = await ReservationService.editReservation(state.formData as ReservationTypes.IReservationItem);
            } else {
                res = await ReservationService.addReservation(state.formData as ReservationTypes.IReservationItem);
            }
            if (res.code === 0) {
                message.success("操作成功！")
                emit("ok");
            }
        }
    })
}

const handleCancel = () => {
    emit("cancel")
}
</script>